<template>
  <div>
    {{num}}
    <div class="part part-0">
      <h1>0.视频须知：</h1>
      <ul>
        <li>1. 视频虽然可以设置宽高，但实际是你设置了宽或高后，展示出来的视频内容的宽高比则是按视频内容定的，如果不满足我们定的，通过黑色背景填充。</li>
        <li>
          2. 常用视频参数获取方法：
          <ul>
            <ol class="txt-indent2">1. 获取视频当前播放时长：<code>videoDom.currentTime</code></ol>
            <ol class="txt-indent2">2. 获取视频总时长：<code>videoDom.duration</code></ol>
          </ul>
        </li>
        <li>
          3. 音视频事件：
          <ul>
            <ol class="txt-indent2">onloadstart： 开始加载</ol>
            <ol class="txt-indent2">ondurationchange：时长改变</ol>
            <ol class="txt-indent2">onloadedmetadata：当浏览器已加载音频/视频的元数据时</ol>
            <ol class="txt-indent2">onloadeddata：当浏览器已加载音频/视频的当前帧时</ol>
            <ol class="txt-indent2">onprogress：当浏览器正在下载音频/视频时</ol>
            <ol class="txt-indent2">oncanplay：当浏览器可以播放音频/视频时</ol>
            <ol class="txt-indent2">oncanplaythrough：可以完全播放，不卡顿，资源已全部加载</ol>
          </ul>
        </li>
      </ul>
    </div>
    <div class="part part-1">
      <h1>1.前端获取摄像头和麦克风并展示：</h1>
      <p>从浏览器中获取媒体设备（摄像头和麦克风），并通过video标签展示媒体流：</p>
      <el-button class="block" @click="initVideo">初始化</el-button>
      <video ref="videoDom" controls width="400"></video>
    </div>

    <div class="part part-2">
      <h1>2.视频上传</h1>
      <p>通过blob流转化上传的视频文件，先获取上传的视频文件，然后将文件通过:</p>
      <pre>
        <code contenteditable="true">
          const blobUrl = window.URL.createObjectURL(file);

          videoDom.src = blobUrl;
          videoDom.play();

          // 另外可以通过window.URL.revokeObjectURL(blobUrl); 进行释放URL对象。
          // 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了
        </code>
      </pre>

      <div class="flex">
        <el-upload class="upload" ref="upload" :auto-upload="false" :show-file-list="false" :on-change="onUpload" action="">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
        <el-button @click="onClose">清除</el-button>
      </div>
      <video ref="videoDom2" controls width="400"></video>
    </div>

    <div class="part part-3">
      <h1>3.进度条</h1>
      <div>
        <span>{{currentTime}}</span>
        <el-progress :percentage="percent"></el-progress>
        <span>{{durationTime}}</span>
      </div>

      <el-upload class="upload" ref="upload3" :auto-upload="false" :show-file-list="false" :on-change="onUpload3" action="">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <video ref="videoDom3" controls width="400"></video>
    </div>

    <div class="part part-4">
      <h3>下载webm</h3>
      <input type="file" ref="url4">
      {{downloadUrl4}}
      <a :href="downloadUrl4" download="1.webm">xx</a>
      <button @click="download4">下载</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "videoTest",
    props: {
      n: {
        type: Number
      }
    },
    data() {
      return {
        num: 0,
        file: null,

        blobUrl: null,

        file3: null,
        percent: 0,
        currentTime: '00:00',
        durationTime: '00:00',

        url4: '',
        downloadUrl4: ''
      }
    },
    watch: {
      n: {
        handler(val) {
          this.num = val;
        },
        immediate: true
      }
    },
    methods: {
      // 捕捉摄像头和麦克风并展示
      initVideo() {
        // navigator为浏览器对象，.mediaDevices是媒体设备，.getUserMedia是获取用户媒体设备，里面传参{video: true, audio: true}，是获取音视频
        // 然后回调，回调传回流，把流作为video标签的视频来源即可实现设备采集的流的展示
        navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        }).then((stream) => {
          console.log(stream);
          let video = this.$refs.videoDom;
          video.srcObject = stream;
          video.play()
        }).catch(err => {
          console.log(err);
        })
      },

      // 上传并预览
      onUpload(file, fileList) {
        // console.log(file, fileList);
        this.file = file.raw;
        this.blobUrl = window.URL.createObjectURL(this.file);
        this.$refs.videoDom2.src = this.blobUrl;
        this.$refs.videoDom2.play()
      },
      onClose() {
        this.$refs.videoDom2.src = null;
        window.URL.revokeObjectURL(this.blobUrl);
        this.blobUrl = null;
      },


      onUpload3(file, fileList) {
        // console.log(file, fileList);
        this.file = file.raw;
        this.blobUrl = window.URL.createObjectURL(this.file);
        let dom = this.$refs.videoDom3;
        dom.src = this.blobUrl;
        dom.play();
        dom.addEventListener('playing', e => {

          const duration = dom.duration;

          this.durationTime = this.sencondsFormatTime(e.target.duration)
          this.timer = setInterval(() => {
            this.currentTime = this.sencondsFormatTime(e.target.currentTime)
            this.percent = Math.round(dom.currentTime/duration * 100);
            if (this.percent >=100) {
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 300)
        })
      },

      sencondsFormatTime(s) {
        let left = Math.floor(s/60); // 获取分钟
        left = left < 10 ? `0${left}` : left; // 如果left长度小于2，修改为：0l这种格式

        let right = Math.ceil(s%60); // 获取秒钟
        right = right<10 ? `0${right}` : right;

        return `${left}:${right}`
      },

      download4() {
        const file = this.$refs.url4.files[0];
        const url =  window.URL.createObjectURL(file)
        debugger
        this.downloadUrl4 = url;
      }
    },
    beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null
    }
  }
</script>

<style scoped>
.part{
  margin-bottom: 50px;
}
</style>
